<template>
	<view style="height: 100%;" class="text-df">
		<view class="flex flex-direction" style="height: 100%;">
			<!-- <u-navbar back-text="返回"></u-navbar> -->
			<!-- <view class="back-icon" :style="{top:top}" @click="goBack">
				<text class="cuIcon-back"></text>
			</view> -->
			<!-- <view class="flex-sub"> -->
			<map class="flex-sub" id="mapNvgt" style="width: 100%; " :latitude="latitude" :longitude="longitude"
				:markers="markers" :show-location="true" :scale="mapScale" :enable-zoom="true"></map>
			<!-- </view> -->
			<view class="flex bg-white padding align-center bt-box solid-top">
				<view class="margin-right flex-sub">
					<view class="text-xl text-black margin-bottom-sm text-600">
						{{title}}
					</view>
					<view class="margin-bottom-sm">
						{{address}}
					</view>
				</view>
				<view class="text-center">
					<button class="cu-btn round" @click="openMap">导航</button>
				</view>
			</view>

		</view>
		<!-- #ifdef H5 -->
		<!-- <u-action-sheet :z-index="99999" :list="actionList" v-model="showAction" @click="handleChoose"></u-action-sheet> -->
		<!-- #endif -->
	</view>
</template>

<script>
	// import tools from "@/commons/tools";
	import {
			mapGetters
		} from 'vuex'
	export default {
		computed: {
					 ...mapGetters(['theme']),
					 },
		data() {
			return {
				mapScale: 16,
				// 初始化的中心位置
				latitude: '',
				longitude: '',
				address: '',
				title: '',
				// 标记点
				markers: [{
					id: 1,
					latitude: '',
					longitude: '',
					name: '',
				}],
				top: this.StatusBar + 10 + 'px',
				actionList: [{
						label: '腾讯地图'
					},
					{
						label: '百度地图'
					},
					{
						label: '高德地图'
					},
				],
				showAction: false
			}
		},
		onShareAppMessage() {
			//  return {
			// 	title: '', // 默认为小程序名称
			// 	path: '', // 默认为当前页面路径
			// 	imageUrl: '' // 默认为当前页面的截图
			// }
		},
		onLoad(option) {
			if (this.theme == 'farmer') {
				uni.setNavigationBarColor({
					backgroundColor: '#0BCA89',
					frontColor: '#ffffff'
				});
			} else {
				uni.setNavigationBarColor({
					backgroundColor: '#006BFE',
					frontColor: '#ffffff',
				});
			}
			this.latitude = option.latitude
			this.longitude = option.longitude
			this.markers[0].latitude = option.latitude
			this.markers[0].longitude = option.longitude
			this.markers[0].name = decodeURIComponent(option.name)
			this.address = decodeURIComponent(option.name)
			this.title = decodeURIComponent(option.title)
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			openMap(item) {
				// #ifdef MP-WEIXIN
				const mapCtx = uni.createMapContext('mapNvgt', this)
				mapCtx.openMapApp({
					longitude: this.longitude * 1,
					latitude: this.latitude * 1,
					destination: this.address,
					success: () => {
						console.log('打开成功')
					},
					fail: (e) => {
						console.log('打开失败', e)
					},
				})
				// #endif
				// #ifdef H5
				this.showAction = true
				// #endif
			},
			// 打开地图app
			handleChoose(index) {
				// #ifdef H5
				console.log('index', index)
				if (index == 0) {
					uni.openLocation({
						longitude: this.longitude * 1,
						latitude: this.latitude * 1,
						destination: this.address,
						success: () => {
							console.log('打开成功')
						},
						fail: (e) => {
							console.log('打开失败', e)
						},
					})
				} else {
					this.navToMap(this.latitude * 1, this.longitude * 1, this.address,
						index)
				}
				// #endif

			},
			navToMap(latitude = 0, longitude = 0, name = '目的地', type = 1) {
				let url
				let lat, long
				const u = navigator.userAgent
				//判断ios
				const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
				//判断Android
				const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1
				if (type == 1) {
					//百度地图 把获取到的非百度坐标转为百度坐标
					lat = latitude
					long = longitude
				} else if (type == 2) {
					//高德地图 把获取到的非GCJ-02坐标转为GCJ-02(火星坐标)
					lat = latitude
					long = longitude
				}
				if (!this.isIos) {
					switch (type) {
						case 1: //百度地图
							url =
								`http://api.map.baidu.com/marker?location=${lat},${long}&title=${name}&content=${name}&output=html`
							break
						case 2: //高德地图
							url =
								// `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${lat}&lon=${long}&dev=0`
								`http://uri.amap.com/marker?position=${long},${lat}&name=${name}&src=mypage&coordinate=gaode&callnative=00`
							break
						default:
							break
					}
				} else {
					switch (type) {
						case 1: //百度地图
							url =
								`http://api.map.baidu.com/marker?location=${lat},${long}&title=${name}&content=${name}&output=html`
							break
						case 2: //高德地图
							url =
								`http://uri.amap.com/marker?position=${long},${lat}&name=${name}&src=mypage&coordinate=gaode&callnative=00`
							break
						default:
							break
					}
				}
				window.location.href = url
			},

		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.back-icon {
		position: absolute;
		/* top: 0%; */
		left: 20px;
		background-color: #fff;
		width: 22px;
		height: 22px;
		line-height: 22px;
		text-align: center;
		border-radius: 11px;
		z-index: 99;
	}

	.bt-box {
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
	}
</style>